import { useNavigate } from "react-router-dom";
import { LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Button, Flex, Layout } from "antd";
import { ThemeSwitch } from "@/components/theme-switch";
import Breadcrumb from "./components/bread-crumb";
import CustomSkin from "./components/custom-skin";
import UserAvatar from "./components/user-avatar";
import Content from "./content";
import Sider from "./sider";

import { useSettingsStore } from "@/stores/settings";

export default function MainLayout() {
  const navigate = useNavigate();

  const collapsed = useSettingsStore((state) => state.collapsed);
  const setCollapsed = useSettingsStore((state) => state.setCollapsed);

  return (
    <Layout>
      <Sider />
      <Layout>
        <Layout.Header
          id="app-header-bar"
          className="flex items-center sticky top-0 z-[999] pl-0 bg-white dark:bg-[#001529]"
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            className="text-inherit hover:text-inherit"
          />
          <Breadcrumb></Breadcrumb>
          <Flex gap={12} className="ml-auto items-center">
            <CustomSkin />
            <ThemeSwitch />
            <div
              className="flex items-center justify-center gap-1 cursor-pointer"
              onClick={() => {
                navigate("/login");
              }}
            >
              <LogoutOutlined className="text-xl" /> 退出登录
            </div>
            <UserAvatar></UserAvatar>
          </Flex>
        </Layout.Header>
        <Content></Content>
      </Layout>
    </Layout>
  );
}
